<!-- 话务量 -->
<template>
  <div class='telephone-traffic'>
    <div class="left">
      <span class='title'>呼入量较昨日增长率</span>
      <div class='pie-chart-content'>
        <PieChart :defaultValue="defaultValue" attrName="yesDayRate"/>
      </div>
    </div>
    <div class="right">
      <span class='title'>接通量较昨日增长率</span>
      <div class='pie-chart-content'>
        <PieChart :defaultValue="defaultValue" attrName="todayRate"/>
      </div>
    </div>
  </div>
</template> 
<script setup>
import PieChart from './PieChart.vue';
import {computed} from 'vue'
const props = defineProps(['currentRate'])
const defaultValue = computed(() => props.currentRate)
</script>
<style lang='less' scoped>
.telephone-traffic {
  width: 100%;
  height: 100%;
  padding: 20px 40px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  .left, .right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    .title {
      font-size: 28px;
      color: #ffffff;
      width: 100%;
      height: 60px;
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
   .pie-chart-content {
      width: 100%;
      flex: 1 0 auto;
    }
  }
}
</style>
